<template>
  <el-dialog :title="`${showText}权限`" :visible.sync="form.isShow" width="40%" @close="btnCancel">
    <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formData.name" style="width:90%" size="mini" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code" style="width:90%" size="mini" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="formData.description" type="textarea" :row="3" style="width:90%" size="mini" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch v-model="formData.enVisible" active-value="1" inactive-value="0" />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getPermissionList, updatePermission, addPermission, getPermissionDetail, delPermission } from '@/api/permission'

export default {
  name: 'AddPermission',
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
        name: '',
        code: '',
        description: '',
        type: this.form.type,
        pid: '',
        enVisible: '0'
      },
      list: {},
      rules: {
        name: [{ required: true, message: '权限名不能为空', trigeer: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigeer: 'blur' }]
      }
    }
  },
  computed: {
    showText() {
      const { id, tip } = this.form
      if (id && tip === 'add') {
        return '添加'
      } else if (id && tip === 'edit') {
        return '编辑'
      } else {
        return '新增'
      }
    }
  },
  updated() {
    this.dataFilter()
    this.getDetail()
  },
  beforeDestroy() {
    this.btnCancel()
  },
  methods: {
    btnOK() {
      // 效验通过
      this.$refs.perForm.validate(async isOk => {
        if (isOk) {
          await addPermission(this.formData)
          this.$message.success('新增成功')
          this.btnCancel()
        }
        this.switchAPI()
        // 通知父组件更新列表
        this.$emit('update', true)
      })
    },
    // 判断调用接口
    async switchAPI() {
      const { tip, id } = this.formData
      if (id && tip === 'add') {
        // 添加模式
        // todo
      } else if (id && tip === 'edit') {
        // 编辑模式
        await updatePermission(this.formData)
        this.$message.success('权限已更新')
      } else {
        // 新增模式
        // todo
      }
    },
    btnCancel() {
      this.formData = {
        name: '',
        code: '',
        description: '',
        type: '',
        pid: '',
        enVisible: '0'
      }
      // 重置表单
      this.$refs.perForm.resetFields()
      this.$emit('showDialog', false)
    },
    dataFilter() {
      const { pid, type, id, tip } = this.form
      id !== 0 ? this.formData.id = id : null
      tip ? this.formData.tip = tip : null
      this.formData.pid = pid
      this.formData.type = type
      this.formData.id = id
    },
    async getDetail() {
      const { id, tip } = this.formData
      if (id && tip === 'edit') {
        const result = await getPermissionDetail(id)
        const { code, name, description, enVisible } = result
        this.formData.code = code
        this.formData.name = name
        this.formData.description = description
        this.formData.enVisible = enVisible
        console.log(result)
      }
    }
  }
}
</script>
